<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css" >
		* {
			margin: 0;
			padding: 0;
			list-style: none;
		}
		.box {
			width: 400px;
			height: 400px;
			padding: 20px;
			margin: auto;
			text-align: center;
			background-color: pink;
		}
		.info {
			text-align: left;
		}
		.info>ul>li:hover {
			background-color: green;
		}
	</style>
</head>
<body>

<div class="box">
	<input type="text" name="" id="keyword">
	<input type="button" value="搜索">
	<div class="info"></div>
</div>

<script src="../jquery.js" type="text/javascript" charset="utf-8" ></script>	
<script type="text/javascript">
$(function(){
	$('#keyword').keyup(function(){
		var kw = $(this).val();
		$.ajax({
			url : 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',
			data : { wd:kw },
			jsonp : 'cb',
			dataType : 'jsonp',
			success : function(data) {
				var sug = data.s;
				var tag = '<ul>';
				$.each(sug,function(i,e){
					tag += '<li>'+e+'</li>';
				});
				tag += '<ul>';
				$('.info').html(tag);
			}
		});
	})



})
</script>
</body>
</html>